import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'my-voter',
  template: `
    <h4 [style.background]="isShow ? 'blue': 'green'">{{index}} {{name}} </h4>
    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
    <button (click)="vote(false)" [disabled]="voted">Disagree</button>
  `
})

export class VoterComponent {
  @Input()  name: string;
  @Input()  index: number;
  @Input()  isShow: boolean;

  
  // 子组件暴露一个 EventEmitter 属性，
  // EventEmitter 属性是一个 输出属性 ，通常带有 @Output 装饰器
  @Output() onVotedd = new EventEmitter<boolean>();
  voted = false;

  vote(agreed: boolean) {
    // 当事件发生时，子组件利用该属性 emits( 向上弹射 ) 事件。
    this.onVotedd.emit(agreed);
    this.voted = true;
  }
}
